<template>
  <div class="page-top">
    <div class="cont">
      <div class="miniapp link"><icon name="ishouji" size="24" />小程序</div>
      <div class="interval"></div>
      <div class="custome link">客服</div>
      <div class="feedback link">反馈</div>
      <div class="flex"></div>
      <div class="no-login" v-if="!userinfo">
        <div class="login link" @click="toLogin">
          <icon name="icondenglu" size="16" />登录
        </div>
        <div class="regist link" @click="toLogin(1)">
          <icon name="iconzhuce" size="14" />注册
        </div>
      </div>
      <div class="userinfo" v-else>
        <div class="name">{{ userinfo.wechat_name }}</div>
        <div class="center">
          <el-dropdown @command="centerCommand">
            <span @click="$router.push({ name: 'UserCenter' })"
              >个人中心<i class="el-icon-arrow-down el-icon--right"></i
            ></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登陆</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="order">我的订单</div>
        <div class="car">
          <el-dropdown>
            <span
              ><icon class="red" name="icongouwuche2" /> 购物车
              <span class="red" v-show="cartlist && cartlist.length">{{
                cartlist ? cartGoodsNum : ""
              }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i
            ></span>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item>黄金糕</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="shoucang">
          <el-dropdown>
            <span
              ><icon class="red" name="iconshoucangbeifen" /> 收藏夹
              <i class="el-icon-arrow-down el-icon--right"></i
            ></span>
            <el-dropdown-menu slot="dropdown"> </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState("user", ["userinfo"]),
    ...mapState("car", ["cartlist"]),
    cartGoodsNum() {
      let num = 0;
      this.cartlist.forEach((item) => {
        num += item.good.length;
      });
      return num;
    },
  },
  watch: {
    userinfo() {
      if (this.userinfo) {
        // 获取购物车
      }
    },
  },
  methods: {
    centerCommand(command) {
      if (command === "logout") {
        this.$store.commit("user/remove");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-top {
  width: 100%;
  .cont {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    font-size: 0;
    .interval {
      display: inline-block;
      height: 15px;
      width: 2px;
      background: #9d9d9d;
      margin: 13px 14px;
    }
    .link {
      display: inline-block;
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      line-height: 40px;
      color: #999999;
      cursor: pointer;
      &:hover {
        color: #666;
      }
    }
    .miniapp {
      color: #d52c1a;
      margin-right: 12px;
      i {
        padding-right: 6px;
      }
      &:hover {
        color: #e6230e;
      }
    }
    .custome {
      margin: 0 24px 0 15px;
    }
    .regist,
    .login {
      margin: 0 0 0 24px;
      color: #d52c1a;
      i {
        padding-right: 10px;
      }
      &:hover {
        color: #e6230e;
      }
    }
    .userinfo {
      font-size: 14px;
      color: #666666;
      display: flex;
      align-items: center;
      height: 40px;
      & > div {
        margin-left: 20px;
      }
      .center {
        span {
          cursor: pointer;
        }
      }
      .red {
        color: #d52c1a;
      }
    }
  }
}
</style>
